<!-- 14 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button class="t9-form-wideget-btn-default" type="primary" :loading="searchBtnLoading" @click="getList">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="GlassHistory"
      :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('T9_shopId'),
              trigger: 'change',
            }"
          >
            <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_cstId')" name="cstId">
            <a-input class="t9-form-wideget-input-default" v-model:value="queryForm.cstId"  allow-clear :placeholder="$t('common_pleaseEnter1')" />
          </a-form-item>
          <a-form-item :label="$t('T9_glassId')" name="glassId" prop="glassId"  :rules="{
              required: true,
              message: $t('T9_glassId'),
              trigger: 'change',
            }">
            <a-input v-if="!queryForm.cstId" v-model:value="queryForm.glassId" allow-clear  class="t9-form-wideget-input-default" :placeholder="$t('common_pleaseEnter1')"/>
            <a-select v-else v-model:value="queryForm.glassId"
               show-search
               allow-clear
               class="t9-form-wideget-input-default"
               :placeholder="$t('common_pleaseSelect')">
              <a-select-option
                v-for="item in options.glassIdList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
    </t-query-form>
     <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" @click="exportExl" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table">
    <t-table align="center"  @cell-click="getRowData" :data="table.list" max-height="100%" :loading="searchBtnLoading">
      <t-column min-width="90" field="eventTime" :title="$t('T9_eventTime')" />
      <t-column min-width="90" field="eventName" :title="$t('T9_eventName')" />
      <t-column min-width="90" field="eventUser" :title="$t('T9_eventUser')" />
      <t-column min-width="90" field="operation" :title="$t('T9_operation')" />
      <t-column min-width="120" field="eventComment" :title="$t('T9_eventComment')" />
      <t-column min-width="80" field="cstId" :title="$t('T9_cstId')" />
      <t-column min-width="80" field="slot" :title="$t('T9_solt')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
      <t-column min-width="90" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="110" field="chamberName" :title="$t('T9_chamberName')" />
      <t-column min-width="110" field="causeEqId" :title="$t('T9_causeEqId')" />
      <t-column min-width="110" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="glassGrade" :title="$t('T9_glassGrade')" />
      <t-column min-width="100" field="glassJudge" :title="$t('T9_glassJudge')" />
      <t-column min-width="100" field="panelGrades" :title="$t('T9_panelGrades')" />
      <t-column min-width="100" field="groupId" v-if="queryForm.shopId === 'CF' || queryForm.shopId === 'CELL'" :title="$t('T9_groupId')" />
      <t-column min-width="100" field="shipGroupId" v-if="queryForm.shopId === 'CELL'" :title="$t('T9_shipGroupId')" />
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="80" field="route" :title="$t('T9_route')" />
      <t-column min-width="110" field="processState" :title="$t('T9_processState')" />
      <t-column min-width="80" field="eqpId" :title="$t('T9_eqId')" />
      <t-column min-width="80" field="boxId" :title="$t('T9_boxId')" />
      <t-column min-width="80" field="processOperationDesc" :title="$t('T9_desc')" />
      <t-column min-width="120" field="specialComment" :title="$t('T9_specialComment')" />
      <t-column min-width="100" field="sortGrade" :title="$t('T9_sortGrade')" />
      <t-column min-width="100" field="panelQty" :title="$t('T9_panelQty')" />
      <t-column min-width="80" field="bayId" :title="$t('T9_bayId')" />
      <t-column min-width="100" field="recipeName" :title="$t('T9_recipeName')" />
      <t-column min-width="100" field="runMode" :title="$t('T9_runMode')" />
      <t-column min-width="150" field="sampleOperation" :title="$t('T9_samplingOperation')" />
      <t-column min-width="100" v-if="queryForm.shopId === 'ARRAY'" field="productVer" :title="$t('T9_productVer')" />
      <t-column min-width="120" v-if="queryForm.shopId === 'CF' || queryForm.shopId === 'CELL'" field="productSpecVer" :title="$t('T9_productSpecVer')" />
      <t-column min-width="120" field="tftLotName" :title="$t('T9_tftLotName')" />
      <t-column min-width="120" field="cfPartNo" :title="$t('T9_cfPartNo')" />
      <t-column min-width="120" field="tftPartNo" :title="$t('T9_tftPartNo')" />
      <t-column min-width="120" field="cfLotName" :title="$t('T9_cfLotName')" />
      <t-column min-width="100" field="shopId" :title="$t('T9_shopId')" />
      <t-column min-width="140" field="bgmNgFlag" :title="$t('T9_bgmoNgFlag')" />
      <t-column min-width="100" field="bgMoFlag" :title="$t('T9_bgmoFlag')" />
      <t-column min-width="100" field="adiFlag" :title="$t('T9_adiFlag')" />
      <t-column min-width="140" field="forceSampleFlag" :title="$t('T9_forceSampleFlag')" />
      <t-column min-width="150" field="queueTimeOverFlag" :title="$t('T9_queueTimeOverFlag')" />
      <t-column min-width="100" field="shortCutFlag" :title="$t('T9_shortCutFlag')" />
      <t-column min-width="100" field="abortFlag" :title="$t('T9_abortFlag')" />
      <t-column min-width="100" field="eventFlag" :title="$t('T9_eventFlag')" />
      <t-column min-width="110" field="abnormalCode" :title="$t('T9_abnormalCode')" />
      <t-column min-width="150" field="eqpMark" :title="$t('T9_1200eqpMaker')" />
      <t-column min-width="100" field="prFlag" :title="$t('T9_prFlag')" />
      <t-column min-width="100" field="metalFlag" :title="$t('T9_metalFlag')" />
      <t-column min-width="100" field="processFlag" :title="$t('T9_processFlag')" />
      <t-column min-width="110" field="processResult" :title="$t('T9_processResult')" />
      <t-column min-width="160" v-if="queryForm.shopId === 'CF'" field="arrayProductSpecVersion" :title="$t('T9_arrayProductSpecVersion')" />
      <t-column min-width="140" field="nextMainStep" :title="$t('T9_nextMainStep')" />
      <t-column min-width="100" field="validateStep" :title="$t('T9_validateStep')" />
      <t-column min-width="100" field="fastRunFlag" :title="$t('T9_fastRunFlag')" />
      <t-column min-width="100" field="cqltId" :title="$t('T9_cqltId')" />
      <t-column min-width="170" field="processResultReason" :title="$t('T9_processResultReason')" />
      <t-column min-width="150" field="multiOwnerId" :title="$t('T9_multiOwnerId')" />
      <t-column min-width="150" field="uvMaskTime" :title="$t('T9_uvMaskTime')" />
      <t-column min-width="150" field="bareGlassName" :title="$t('T9_bareGlassName')" />
      <t-column min-width="120" field="issueOperation" :title="$t('T9_issueOperation')" />
      <t-column min-width="100" field="issueEq" :title="$t('T9_issueEq')" />
      <t-column min-width="100" field="issueFlag" :title="$t('T9_issueFlag')" />
      <t-column min-width="160" field="registerReworkFlow" :title="$t('T9_registerReworkFlow')" />
      <t-column min-width="100" field="ablno" :title="$t('T9_ablno')" />
    </t-table>
    </div>
     <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
        >
       <a-form-item :label="$t('T9_abnormalCode')"  name="abnormalCode" style="width:100%">
                <a-textarea allow-clear v-model:value="dataForm.abnormalCode" :rows="1" :title="dataForm.eventComment" />
          </a-form-item>
           <a-form-item :label="$t('T9_eventComment')" name="eventComment" style="width:100%">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
          </a-form-item>
        </a-form>
     </div>
  </div>
</template>

<script>
   import { defineComponent } from 'vue'
  import { shopIdList } from '@/views/options'
  import { downloadBlobFile } from '@/utils/download'
  import {
    getList
  } from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'GlassHistory',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: [
          ]
        },
        options: {
          shopIdList
        },
        queryForm: {
          shopId: 'ARRAY',
          cstId: undefined,
          glassId: ''
        },
        dataForm: {
          abnormalCode: '',
          eventComment: ''
        }
      }
    },
    computed: {},
    watch: {
      'queryForm.cstId': {
        handler(cstId) {
          this.initOptions([
            {
              name: 'glassId',
              params: { cstId }
            }
          ])
        }
      }
    },
    created() {
    },
    methods: {
      exportExl() {
        if (!this.table.list.length) return
        const params = {
          dtoName: 'GlassHistoryDTO',
          cstId: this.queryForm.cstId,
          queryId: 'GetProductHistoryList',
          shopId: this.queryForm.shopId,
          version: '80009',
          glassId: this.queryForm.glassId,
          menuName: 'glassHistory',
          usage: 'queryGlassHistoryList',
          export: true
        }
        getList(params).then(res => {
          downloadBlobFile(res, 'cstList')
        })
      },
      getRowData(row) {
        this.dataForm.eventComment = row.row.eventComment
        this.dataForm.abnormalCode = row.row.abnormalCode
      },
      getList() {
        this.$refs.queryForm.validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const obj = {
              dtoName: 'GlassHistoryDTO',
              cstId: this.queryForm.cstId,
              queryId: 'GetProductHistoryList',
              shopId: this.queryForm.shopId,
              version: '80009',
              glassId: this.queryForm.glassId,
              menuName: 'glassHistory',
              usage: 'queryGlassHistoryList'
            }
            getList(obj).then((res) => {
              this.searchBtnLoading = false
              this.table.list = res
            })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
